<template>
	<view class="order-list">
		<view class="order-li" v-for="good in list" :key="good.priceMark"
			:class="good.status>=5&&good.status<15?'order-ing':''">
			<view class="time">
				<view>用车时间:{{good.useTime | setTimeText}} </view>
				<view class="price">300元</view>
			</view>
			<!-- 			<view class="order-one flex-lr-verticality">
				<view class="o-title">
					{{good.orderType|setServiceType}}
					{{good.vehicleTypeName}}
				</view>
				<view class="o-status">
					{{good.driverStatus|setOrderStatus}}
				</view>
			</view> -->
			<view class="order-driver flex-lr-verticality" v-if="JSON.parse(good.driverInfo)">
				<view class="d-name">司机姓名:{{JSON.parse(good.driverInfo).driverName}}</view>
				<view class="d-btn" @click="callPhone(JSON.parse(good.driverInfo).driverPhone)">联系司机</view>
			</view>
			<view class="order-three">
				<view class="flex-verticality">
					<view class="out-round out-s flex-center">
						<view class="in-round">
							起
						</view>
					</view>
					<view class="add-text">
						{{good.fromName}}
					</view>
				</view>
				<view class="add-line" v-if="good.toName"></view>
				<view class="flex-verticality" v-if="good.toName">
					<view class="out-round out-e flex-center">
						<view class="in-round">
							终
						</view>
					</view>
					<view class="add-text">
						{{good.toName}}
					</view>
				</view>
			</view>

			<view class="btn_case">
				<view></view>
				<view class="box">
					<view class="btn cancel" @click="refundOrder(good)" v-if="setIsCancel(good)">取消订单</view>
					<view class="btn pay" @click="payOrder(good)" v-if="good.payStatus == 0">继续支付</view>
					<view class="btn invoice" v-if="good.invoiceStatus == null && good.status == 2" @click="handleClickKfp(good)">
						开发票</view>
					<view class="btn invoice" v-if="good.invoiceStatus == 0"	@click="handleLookInvoice(good)">(开票中)更新发票</view>
					<view class="btn success" v-if="good.invoiceStatus == 2"@click="handleResetInvoice(good)">(开票成功)发票推送</view>
				</view>
			</view>

		</view>

		<!-- 提示 -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default () {
					return []
				}
			}
		},
		filters: {
			setServiceType(type) {
				console.log(type);
				if (type == 201) {
					return '包车'
				} else if (type == 301) {
					return '预约用车'
				} else if (type == 101) {
					return '接机'
				} else if (type == 102) {
					return '送机'
				}
			},
			setTimeText(time) {
				if (time) {
					var nowDateVal = new Date();
					var nD = nowDateVal.getDay(); // 获取今天是星期几 0:星期日 1: 星期1
					var dateVal = `${time}:00`.replace(/-/g, "/");
					var timeStamp = new Date(dateVal);
					var M = timeStamp.getMonth() + 1; // 获取月份，注意要+1，因为getMonth()返回的是0-11
					var D = timeStamp.getDate(); // 获取几号
					var h = timeStamp.getHours() < 10 ? "0" + timeStamp.getHours() : timeStamp.getHours(); // 小时
					var m = timeStamp.getMinutes() < 10 ? "0" + timeStamp.getMinutes() : timeStamp.getMinutes(); // 分钟
					var w = timeStamp.getDay(); // 获取传入时间是星期几
					var week; // 星期
					const weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
					week = weeks[w];

					// 判断日期是今天、明天还是其他日期
					if (timeStamp.toDateString() === nowDateVal.toDateString()) {
						week = `今天 ${M}月${D}日`;
					} else if (timeStamp.getDate() === nowDateVal.getDate() + 1) {
						week = `明天 ${M}月${D}日`;
					} else {
						week = `${M}月${D}日`;
					}
					return `${week} ${h}:${m}`;
				}
			},
			setOrderStatus(status) {
				console.log(status);
				if (status == null) {
					return ''
				} else if (status == '1') {
					return '司机出发'
				} else if (status == '2') {
					return '司机就位'
				} else if (status == '3') {
					return '开始服务'
				} else if (status == '4') {
					return '服务完成'
				}
			},
		},
		methods: {
			//开发票出发
			handleClickKfp(orderInfo) {
				console.log('ooo', orderInfo.id)
				uni.navigateTo({
					url: `/pages/invoice/invoice?orderId=${orderInfo.id}`
				})
			},
			//点击重发
			handleResetInvoice(orderInfo) {
				uni.showModal({
					title: '请输入邮箱',
					content: '',
					editable: true, //是否显示输入框
					placeholderText: '请输入接受发票的邮箱', //输入框提示内容
					confirmText: '确认',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							this.$u.post(`/vehicleService/invoice/resend`, {
								invoiceId: orderInfo.invoiceId,
								email: res.content
							}).then(res => {
								uni.showToast({
									title: '发送成功',
									icon: 'none'
								})
								this.$emit('goodsReset')
							})
						}
					}
				});
			},
			handleLookInvoice(orderInfo) {
				this.$u.post(`/vehicleService/invoice/detail`, {
					invoiceId: orderInfo.invoiceId
				}).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: '更新状态成功',
							icon: "none"
						})
						this.$emit('goodsReset')
					}
				})
				// uni.navigateTo({
				// 	url: `/pages/invoiceList/invoiceList?id=${orderInfo.invoiceId}`
				// })
			},
			// 联系司机
			callPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone //仅为示例
				});
			},
			// 取消订单
			refundOrder(good) {
				this.$emit('refundOrder', good);
			},
			// 完成订单
			completeOrder(good) {
				this.$emit('completeOrder', good);
			},
			setIsCancel(item) {
				console.log('item', item);
				let {
					payStatus,
					status,
					useTime
				} = item
				let timestamp = new Date(useTime).getTime() / 1000; //用车时间
				let currentTimestamp = new Date().getTime() / 1000; //当前时间

				let send = true;
				if (status == 2) {
					console.log('status == 2');
					send = false;
				}
				console.log('payStatus', payStatus);
				if (payStatus != 1 && payStatus != 3) {
					console.log('status == 22');
					send = false;
				}
				if (currentTimestamp > timestamp && payStatus == 1) {
					console.log('status == 33');
					send = false;
				}

				return send

			},
			// 小程序支付
			async payOrder(orderInfo) {
				let timeStamp = parseInt(Date.now() / 1000) + "";
				let packageId = orderInfo.prepayId;
				let nonce_str = Math.random().toString(32).substr(0, 31);
				let signType = "MD5";
				const appid = uni.getAccountInfoSync().miniProgram.appId;

				// let payInfo =`appId=${appid}&nonceStr=${nonce_str}&package=${packageId}&signType=${signType}&timeStamp=${timeStamp}`;
				let {
					result
				} = await this.$u.get("/wx/prePay/genSign?prePayId=" + orderInfo.prepayId)
				uni.requestPayment({
					timeStamp: result.timeStamp, //当前时间戳
					nonceStr: result.nonceStr, //随机字符串
					package: result.prepayId,
					signType: result.signType,
					paySign: result.paySign,
					appId: result.appid,
					success: res => {
						console.log("支付成功", res);
						this.$refs.uToast.show({
							title: "预约成功，正在跳转页面",
							type: "success",
							icon: false,
						});
						setTimeout(function() {
							uni.redirectTo({
								url: "../result/index",
							});
						}, 500);
					},
					fail: err => {
						console.log("支付失败", err);
						this.$refs.uToast.show({
							title: "支付失败",
							type: "error",
							icon: false,
						});
						setTimeout(function() {
							uni.reLaunch({
								url: "../order/index",
							});
						}, 500);
					},
				});
				return
				this.$u.post(`/pay/pay/${order.id}`, {
					openid: uni.getStorageSync('OPENID')
				}).then(data => {
					uni.requestPayment({
						timeStamp: data.timeStamp,
						nonceStr: data.nonceStr,
						package: data.packageValue,
						signType: data.signType,
						paySign: data.paySign,
						success: function(res) {
							order.status = '3';
							order.userPayListStatus = '3';
						},
						fail: function(err) {
							that.$refs.uToast.show({
								title: '支付失败',
								type: 'error',
								icon: false
							})
						}
					})
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		line-height: 1;
	}

	.order-list {
		padding: 0 30upx;
		padding-top: 28upx;

		.order-li {
			border: 1upx solid #FFF;
			background-color: #fff;
			margin-bottom: 28upx;
			border-radius: 10upx;
			padding: 26upx 44upx 40upx 36upx;
			color: #333333;

			&:last-child {
				margin-bottom: 0;
			}

			.time {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 32rpx;
				font-weight: bold;
				padding-bottom: 24rpx;
				border-bottom: 1px solid #e4e4e4;

				.price {
					color: #ffb45d;
					font-size: 36rpx;
					font-weight: bold;
				}
			}

			.order-one {
				padding-bottom: 20upx;

				.o-title {
					font-size: 32upx;
					font-weight: bold;
				}

				.o-status {
					font-size: 30upx;
					color: #999999;
				}
			}

			.order-driver {
				margin-top: 20upx;

				.d-name {
					font-size: 28upx;
				}

				.d-btn {
					width: 148upx;
					line-height: 48upx;
					background: #ECF3FE;
					border: 1upx solid #3888FC;
					border-radius: 4upx;
					text-align: center;
					font-size: 28upx;
					color: #3888FC;
				}
			}

			.order-three {
				margin-top: 25upx;
				padding-bottom: 25upx;
				border-bottom: 1px solid #e4e4e4;

				.out-round {
					width: 40upx;
					height: 40upx;
					border-radius: 50%;
				}

				.in-round {
					border-radius: 50%;
					text-align: center;
					line-height: 22upx;
					font-size: 20upx;
					color: #FFFFFF;
				}

				.add-text {
					font-size: 26upx;
					color: #666666;
					margin-left: 22upx;
					line-height: 38upx;
				}

				.out-s {
					background-color: #5470ff;
				}

				.out-e {
					background-color: #ffa945;
				}

				.add-line {
					width: 2upx;
					height: 28upx;
					border: 1upx dashed #DCDCDC;
					margin: 5upx 0;
					margin-left: 16upx;
				}
			}

			.btn_case {
				display: flex;
				justify-content: space-between;

				.box {
					display: flex;

					.btn {
						padding: 16rpx;
						// line-height: 58upx;
						border-radius: 4upx;
						text-align: center;
						font-size: 28upx;
						margin-top: 25upx;
						margin-left: 20rpx;
						border-radius: 14rpx;
					}

					.cancel {
						border: 1upx solid #C32728;
						color: #C32728;
					}

					.pay {
						border: 1px solid #ffa63e;
						color: #ffa63e;
					}
					.invoice {
						border: 1px solid #c6e29b;
						color: #c6e29b;
					}
					.success {
						border: 1px solid green;
						color: green;
					}

				}
			}

		}

		.order-ing {
			border: 1upx solid #FD8A5C;
			background-color: #FEFCFB;
		}
	}
</style>